<template>
  <div class="app-container" style="height: 100%;">
    <div class="app-container-inner" style="display: flex;flex-direction: column;" v-loading="loading" element-loading-text="加载中...">
      <div class="header flex-justify-between">
        <el-button class="btn_back" plain color="#007cff" @click="goBack">旧件退回</el-button>
        <div class="search flex-align-center">
          <el-date-picker v-model="time" type="daterange" range-separator="~" start-placeholder="开始日期"
            end-placeholder="申请结束日期" @change="dateChange" value-format="YYYY-MM-DD HH:mm:ss" />
          <el-input clearable v-model="data.workSpareNo" @keyup.enter.native="getspareWork" placeholder="配件单号"
            class="input-width" />
          <el-input clearable v-model="data.workNo" @keyup.enter.native="getspareWork" placeholder="工单单号"
            class="input-width" />
          <el-select v-model="data.status" class="mr10" placeholder="状态" @change="getspareWork" filterable clearable>
            <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.name" /> </el-select>
          <el-select v-model="data.type" class="mr10" placeholder="申请类型" @change="getspareWork" filterable clearable>
            <el-option v-for="item in options1" :key="item.value" :value="item.value" :label="item.name" /> </el-select>
          <el-select v-model="data.oldCopeWay" class="mr10" placeholder="旧件处理方式" @change="getspareWork" filterable
            clearable>
            <el-option v-for="item in options2" :key="item.value" :value="item.value" :label="item.name" /> </el-select>
          <el-select v-model="data.networkSpareType" class="mr10" placeholder="配件类型" @change="getspareWork" filterable
            clearable>
            <el-option v-for="item in options3" :key="item.value" :value="item.value" :label="item.name" /> </el-select>
          <el-button class="btn_back" plain type="primary" @click="getspareWork">
            <el-icon class="mr5">
              <Search />
            </el-icon>搜索
          </el-button>
        </div>
      </div>
      <div class="table-ele" style="flex: 1;position: relative;">
        <el-table :border="true" stripe height="100%" style="position: absolute;"  resizable :data="tableDataList">
          <template #empty>
            <el-empty description="暂无数据" />
          </template>
          <el-table-column show-overflow-tooltip label="序号" type="index" fixed="left" min-width="50">
           
          </el-table-column>
          <el-table-column show-overflow-tooltip fixed="left" prop="code" label="配件单号" min-width="170">
            <template #default="scope">
              <span class="number" @click="viewDetail(scope.row.id)">{{ scope.row.code }}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="workNo" label="工单单号" width="160">
            <template #default="scope">
              <span class="number" @click="goOrder(scope.row.workId)">{{ scope.row.workNo }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态" width="83">
            <template #default="scope">
              <el-tag type="warning" v-if="scope.row.status == 1">待审核</el-tag>
              <el-tag v-if="scope.row.status == 2">已通过</el-tag>
              <el-tag type="warning" v-if="scope.row.status == 3">已驳回</el-tag>
              <el-tag type="info" v-if="scope.row.status == 4">已撒回</el-tag>
              <el-tag type="info" v-if="scope.row.status == 5">已取消</el-tag>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="type" label="申请类型" width="100">
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="model" label="配件名称" width="200">
          </el-table-column>
          <el-table-column show-overflow-tooltip label="旧件处理方式" width="100">
            <template v-slot="i">
              {{ i.row.oldCopeWay == 1 ? '废弃' : i.row.oldCopeWay == 2 ? '旧件退回' : '' }}
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="applyTotalQty" label="申请数量" width="80" />
          <el-table-column show-overflow-tooltip prop="applyTotalPrice" label="申请总金额" width="90">
            <template v-slot="i">
              ￥{{ i.row.applyTotalPrice }}
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="checkTotalQty" label="审批数量" width="80" />
          <el-table-column show-overflow-tooltip prop="checkTotalPrice" label="审批总金额" width="90">
            <template v-slot="i">
              ￥{{ i.row.checkTotalPrice }}
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="applyEmp" label="申请人员" width="120" />
          <el-table-column show-overflow-tooltip prop="reviewEmp" label="审核人员" width="120" />
          <el-table-column show-overflow-tooltip prop="network" label="申请服务商" width="150" />
          <el-table-column show-overflow-tooltip prop="createTime" label="申请时间" width="150" />
          <el-table-column show-overflow-tooltip prop="reviewTime" label="	审核时间" width="150" />
          <el-table-column fixed="right" label="操作" width="60">
            <template #default="scope">
              <span class="waiting_x" v-if="scope.row.status == 1" @click="viewCheck(scope.row)">审核</span>
              <span class="waiting_pass" v-else>审核</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <Pagination ref="pagination" :list_total="total" @size-change="getspareWork" @current-change="getspareWork" />
      </div>
      <!-- 费用审核弹出框 -->
      <CheckParts v-if="checkDialog" :workId="workId" :checkDialog="checkDialog" :partsId="partsId"
        @assign-dialog="checkDialog = false" @update-list="getspareWork()"></CheckParts>
      <!-- 查看详细弹出框 -->
      <PartsDetail v-if="detailDialog" :partsId="partsId" :checkDialog="detailDialog"
        @assign-dialog="detailDialog = false">
      </PartsDetail>

    </div>
  </div>
</template>

<script setup lang="ts">
import Pagination from '@/components/Pagination/index.vue'
import { ref, onMounted, reactive } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { spareWork } from '../../../api/parts'
import CheckParts from './components/CheckParts.vue'
import PartsDetail from './components/PartsDetail.vue'
const router = useRouter()
const loading = ref(false)
const pagination = ref()
const total = ref(0)
let tableDataList = ref(null)
const checkDialog = ref(false)
const detailDialog = ref(false)
let data = reactive({
  "createEndTime": "",	//申请结束时间
  "createStartTime": "",//申请开始时间
  "limit": 0,
  "networkSpareType": null,//	服务商配件类型：1-自购配件，2-服务商仓库配件	
  "oldCopeWay": null,//	旧件处理方式：1-废弃，2-旧件退回
  "page": 0,
  "status": null,//工单配件状态：1-待审核、2-已通过、3-已驳回、4-已撒回，5-已取消
  "type": null,//申请类型：1-商家配件，2-服务商配件
  "workNo": "",//工单单号
  "workSpareNo": ""//配件单号
})
const time = ref(null)
const partsId = ref(null)
const workId = ref(null)
// 服务费用项目状态
const options = [{ value: 1, name: '待审核' }, { value: 2, name: '已通过' }, { value: 3, name: '已驳回' }, { value: 4, name: '已撒回' }, { value: 5, name: '已取消' }]
//申请类型
const options1 = [{ value: 1, name: '商家配件' }, { value: 2, name: '服务商配件' }]
// 旧件处理方式
const options2 = [{ value: 1, name: '商家配件' }, { value: 2, name: '服务商配件' }]
// 服务商配件类型
const options3 = [{ value: 1, name: '自购配件' }, { value: 2, name: '服务商仓库配件' }]

// 费用审核
const viewCheck = (n: any) => {
  checkDialog.value = true
  partsId.value = n.id
  workId.value = n.workId
}
const goBack = () => {
  router.push('/order/preturn')
}
// 查看工单
const goOrder = (n: string) => {
  router.push('/order/odetail/' + n)
}
// 查看费用详细
const viewDetail = (n: number) => {
  detailDialog.value = true
  partsId.value = n
}
const dateChange = (val) => {
  if (val === null) {
    data.createStartTime = ''
    data.createEndTime = ''
  } else {
    data.createStartTime = val[0]
    data.createEndTime = val[1]
  }
  getspareWork()
}
const getspareWork = async () => {
  loading.value = true
  data.limit = pagination.value.size//每页显示数量
  data.page = pagination.value.current//当面页码
  await spareWork(data).then(res => {
    if (res.data.success) {
      tableDataList.value = res.data.data.rows
      total.value = Number(res.data.data.total)
    } else {
      ElMessage({
        showClose: true,
        message: res.data.message,
        type: 'error',
        duration: 4000,
        offset: 200
      })
    }
    loading.value = false
  })
}
onMounted(() => {
  getspareWork()
})
</script>

<style scoped lang="scss">
@import './index';
</style>
